import {
    getCuesSubmitPage, searchTreeOrganization,
} from '@/services/api/api-county';
import { findTagColor } from '@/utils/findTagColor';
import { CheckCircleOutlined, FileImageOutlined, PaperClipOutlined } from '@ant-design/icons';
import { ModalForm, ProFormDigit } from '@ant-design/pro-form';
import ProTable, { ActionType } from '@ant-design/pro-table';
import { Space, Table, Tag, Typography, message, Input, TreeSelect } from 'antd';
import { DefaultOptionType } from 'antd/lib/select';
import moment from 'moment';
import React, { useEffect, useRef, useState } from 'react';
import { useAccess } from 'umi';
import DetailsSubmit from '../DetailsCounty/DetailsSubmit';
import { LightFilter, ProFormDateRangePicker, ProFormSelect,  } from '@ant-design/pro-components';
import ProList from '@ant-design/pro-list';

interface TableSubmitProps {
    onDetails: (id: string, name: string) => void;
    countyKey: string
}

const TableSubmit: React.FC<TableSubmitProps> = (props) => {
    const { onDetails, countyKey } = props;
    const access = useAccess();
    const actionRef = useRef<ActionType>();
    const [queryParam, setQueryParamState] = useState({});
    const [articleOrganizations, setArticleOrganizationState] = useState<any[]>([]);

    /**
     * 加载 单位 列表
     * @param key
     */
    const treeOrganizationData = async () => {
        try {
            const response = await searchTreeOrganization({ countyKey });
            if (response.code === 0) {
                setArticleOrganizationState(response.data);
                console.log(response.data);

            }
        } catch (error) { }
    };

    useEffect(() => {
        treeOrganizationData();
    }, []);
    useEffect(() => {
        actionRef.current?.reset()
    }, [countyKey])
    const filter = (inputValue: string, path: DefaultOptionType[]) =>
        path.some(
            (option) => (option.label as string).toLowerCase().indexOf(inputValue.toLowerCase()) > -1,
        );

    return (
        <>
            <Input.Search
                placeholder="查询标题"
                enterButton="搜索"
                allowClear
                style={{ maxWidth: 522, width: '100%' }}
                onChange={(e) => {
                    setQueryParamState({ ...queryParam, articleName: e.target.value });
                }}
                onSearch={(value) => {
                    actionRef.current?.reset();
                }}
            />
            <LightFilter
                // initialValues={{ run: 2 }}
                onValuesChange={(value) => {
                    setQueryParamState(value);
                    actionRef.current?.reset();
                }}
            >
                {/* <ProFormTreeSelect
                    name="articleOrganizationIds"
                    label="报送单位"
                    width="xl"
                    placeholder="选择单位"
                    fieldProps={{
                        treeData: articleOrganizations,
                        treeCheckable: true,
                        showCheckedStrategy: TreeSelect.SHOW_ALL,
                    }}
                /> */}
                <ProFormSelect
                    name="isAdopt"
                    label="是否录用"
                    options={[
                        {
                            label: '已录用',
                            value: 1,
                        },
                        {
                            label: '未录用',
                            value: 0,
                        },
                    ]}
                />
                <ProFormDateRangePicker name="createdTimes" label="报送日期" allowClear fieldProps={{
                    popupStyle: {
                        width:280
                    }
                }} />
            </LightFilter>
            <ProList<CuesSubmitData.SubmitPage>
                header={false}
                headerTitle={false}
                ghost={true}
                // ghost={false}
                // itemCardProps={{
                //   ghost: false,
                // }}
                pagination={{
                    defaultPageSize: 8,
                    showSizeChanger: false,
                    showTotal: false,
                    style: { textAlign: 'center' },
                }}
                className='topicRender'
                style={{ marginTop: 10 }}
                actionRef={actionRef}
                request={async (params = {}) => {
                    if (params.organizationIds) {
                        const organizationParentIds: string[] = [];
                        let organizationIds: string[] = [];

                        params.organizationIds.forEach((item: string | any[]) => {
                            if (item.length === 1) {
                                organizationParentIds.push(item[0]);
                            } else if (item.length > 1) {
                                organizationIds.push(item[1]);
                            }
                        });
                        organizationParentIds.forEach((id) => {
                            const ids = articleOrganizations.find((item) => item.id === id).children;
                            organizationIds = organizationIds.concat(ids.map((item: any) => item.id));
                        });
                        params.articleOrganizationIds = organizationIds;
                    }

                    const response = await getCuesSubmitPage({ ...params, countyKey, ...queryParam, });

                    return Promise.resolve({
                        data: response.data.data,
                        total: response.data.total,
                        success: response.code === 0,
                    });
                }}
                showActions="hover"
                grid={{ gutter: 18, column: 1 }}
                onItem={(record: any) => {
                    return {
                        onMouseEnter: () => { },
                        onClick: () => { },
                    };
                }}
                renderItem={(item: CuesSubmitData.SubmitPage, index: number) => {
                    return (
                        <DetailsSubmit
                            table='submit'
                            onRefurbish={() => {
                                actionRef.current?.reload();
                            }}
                            countyKey={countyKey}
                            id={item.id}
                            name={item.articleName}
                            item={item}
                            triggerMode="card"
                        />
                    );
                }}
                rowKey={'id'}
                toolBarRender={false}
            />
        </>
    );
};

export default TableSubmit;
